<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/css/index.css">
    <script src="/static/js/echarts.min.js"></script>
    <script src="/static/js/chain.js"></script>
</head>

<body>
<div id="header"><h1>可视化大屏</h1></div>
<div class="box">
    <div class="left-box">
        <div class="grid-item line" id="line1"></div>
        <div class="grid-item line" id="line2"></div>
    </div>
    <div class="center-box">
        <div class="grid-item chinamap" id="map1"></div>
    </div>
    <div class="bottom-box">
        <div class="l-box">
            <div class="grid-item bar" id="bar1"></div>
        </div>
        <div class="r-box">
            <div class="grid-item pie" id="pie1"></div>
        </div>
    </div>
</div>
<script type="module">
    var pie1 = echarts.init(document.getElementById('pie1'));
    var latestDate = "{{ xgdata_new.date_day }}";
    var quezhen = {{ xgdata_new.quezhen }};
    var huoyuebingli = {{ xgdata_new.huoyuebingli }};
    var siwang = {{ xgdata_new.siwang }};
    var huifu = {{ xgdata_new.huifu }};
    const option= {
        title:{
            text:"最新一天"+latestDate+"病况累计统计饼图",
            left:'left',
            subtext:"累计确诊人数："+quezhen+"人"
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
            data: ['活跃病例', '死亡病例', '康复病例'],
            bottom:"5%"
        },
        series:[
            {
                name: '病况统计',
                type:"pie",
                data:[
                    {value:huoyuebingli,name:"活跃病例"},
                    {value:siwang,name:"死亡病例"},
                    {value:huifu,name:"康复病例"},
                ],
                radius: '50%',
                label: {//饼图文字的显示
                    show: true, //默认  显示文字
                    formatter: function (arg) {
                        console.log(arg);
                        return arg.name + ':' + arg.value + "人" +'\n'+ "占比"+arg.percent + "%"
                    }
                }
            }
        ]
    }
    pie1.setOption(option);
</script>
<script type="module">
    var chinamap = echarts.init(document.getElementById('map1'))
    const map_data = []
    var new_date;
    {% for i in xgdata_pro %}
    	map_data.push({
            name:"{{ i.pro_cn }}",
            value:{{ i.quezhen }}
        })
        new_date = "{{ i.date_day }}"
    {% endfor %}

    const option={
        title: {  //标题样式
            text: '全国累计确诊热力分布图',
            x: "center",
            subtext: '截至'+new_date
            },
        tooltip: {  //这里设置提示框
            trigger: 'item',  //数据项图形触发
            backgroundColor: "white",  //提示框浮层的背景颜色。
            //字符串模板(地图): {a}（系列名称），{b}（区域名称），{c}（合并数值）,{d}（无）
            formatter: '地区：{b}<br/>确诊人数：{c}'
            },
        legend: {
            orient: 'vertical',
            right: '5%',
        },
        visualMap: {//视觉映射组件
            type: 'piecewise',
            top:'center',
            right:'right',
            min:1,
            max:68135,
            pieces: [
                { min: 10000, max: 1000000, label: '确诊大于等于10000人', color: '#372a28' },
                { min: 1001, max: 9999, label: '确诊1001-9999人', color: '#4e160f' },
                { min: 500, max: 1000, label: '确诊500-1000人', color: '#974236' },
                { min: 100, max: 499, label: '确诊100-499人', color: '#ee7263' },
                { min: 1, max: 99, label: '确诊1-99人', color: '#f5bba7' },
            ],

        },
        series: [
                {
                    name: '累计确诊',
                    type: 'map',
                    mapType: 'china',
                    roam: false,//是否开启鼠标缩放和平移漫游
                    itemStyle: {//地图区域的多边形 图形样式
                        normal: {//是图形在默认状态下的样式
                            label: {
                                show: true,//是否显示标签
                                textStyle: {
                                    color: "black"
                                }
                            }
                        },
                        zoom: 1.5,  //地图缩放比例,默认为1
                        emphasis: {//是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时
                            label: { show: true }
                        }
                    },
                    top: "3%",//组件距离容器的距离
                    data:map_data
                }
        ],
    }
    chinamap.setOption(option)
</script>
<script type="module">
    var bar1 = echarts.init(document.getElementById('bar1'))
    var X = []
    var Y = []
    {% for i in xgdata_hubei %}
    	X.push(new Date("{{ i.date_day }}").getTime())
        Y.push({{ i.quezhen }})
    {% endfor %}

    const data = X.map((date,index)=>[date,Y[index]]);

    const option={
        title:{
            text:'湖北严格防控期间,累计确诊人数柱状图',
            subtext:'防控区间：2020-1-24~3-31'
        },
        tooltip:{
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
          },
          formatter: function (params) {
            var date = echarts.format.formatTime('yyyy-MM-dd', params[0].value[0]);
            return `${date}<br/>确诊人数: ${(params[0].value[1])}`;
          }
        },
        xAxis: {
            type: "time",
            axisLabel:{
                formatter:function (value){
                    return echarts.format.formatTime('MM-dd', value);
                }
            }
          },
          yAxis: {
            type: "value",
          },
        series:[{
            data:data,
            type:'bar',
        }],
    }
    bar1.setOption(option)
</script>
<script type="module">
    // 初始化 echarts 对象
    var line1 = echarts.init(document.getElementById('line1'));
    {#首先，声明两个 javascript 的数组#}
    var series_data = [];
    var xAxis_data = [];
    {#使用循环，依次将数据库需要展示的数据添加到刚才声明的数组中#}
    {% for i in xgdata_sum %}
       xAxis_data.push(new Date("{{ i.date_day }}").getTime());
       series_data.push({{i.siwanglv}}*100)
    {% endfor %}
    // 构造 series.data 所需的数据格式
    const data = xAxis_data.map((date, index) => [date, series_data[index]]);
    // ECharts 配置
    const option = {
        title: {
            text: '全国累计死亡率时间变动图',
            left: 'center'
        },
        tooltip: { //悬浮显示
            trigger: 'axis',
            axisPointer: {
                type: 'cross' //十字架
            },
        formatter: function (params) {
            var date = echarts.format.formatTime('yyyy-MM-dd', params[0].value[0]);
            return `${date}<br/>死亡率: ${(params[0].value[1]).toFixed(2)}%`;
        }
        },
        xAxis: {
            type: 'time',
            axisLabel: {
                formatter: function (value) {
                    return echarts.format.formatTime('yyyy-MM-dd', value);
                }
            }
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: data,
            type: 'line',
            smooth:true,
            symbol:'none',
        }],
        markLine: { // 标记线，可用于显示平均值或其他参考线
                data: [
                    {
                        type: 'average',
                        name: '平均值'
                    }
                ]
            }
    };
    // 使用 ECharts 实例设置配置
    line1.setOption(option);
</script>
<script type="module">
    var line2 = echarts.init(document.getElementById("line2"));
    var X = []
    var Y = []
    {% for i in xgdata_sum %}
        X.push(new Date("{{ i.date_day }}").getTime());
        Y.push({{i.kangfulv}}*100)
    {% endfor %}
    const data1 = X.map((date,index) => [date,Y[index]])
    const option = {
        title: {
            text: '全国累计康复率时间变动图',
            left: 'center'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross'
            },
        formatter: function (params) {
            var date = echarts.format.formatTime('yyyy-MM-dd', params[0].value[0]);
            return `${date}<br/>康复率: ${(params[0].value[1]).toFixed(2)}%`;
        }
        },
        xAxis: {
            type: 'time',
            axisLabel: {
                formatter: function (value) {
                    return echarts.format.formatTime('yyyy-MM-dd', value);
                }
            }
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: data1,
            type: 'line',
            smooth:true,
            symbol:'none',
        }],
    };
    line2.setOption(option);
</script>
</body>
</html>